<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <link rel="stylesheet" href="./css.css">
</head>
<body>
    <div id="box">
        <div class="box">
            <ul class="mainmenu" :class="current">
                <li class="music" v-on:click="current='music'">
                    <!-- 目标路由的链接 -->
                    <router-link to="/music">音乐</router-link>
                </li>
                <li class="videos" v-on:click="current='videos'">
                    <router-link to="/movie">电影</router-link>
                </li>
                <li class="news" v-on:click="current='news'">
                    <router-link to="/news">新闻</router-link>
                </li>
            </ul>
            <!-- 路由出口,路由渲染的位置 -->
            <router-view></router-view>    
        </div>
    </div>
    <template id="music">
        <div class="sub">
            <div class="submenu">
                <ul :class="subcur">
                    <li class="first" v-on:click="subcur='first'">
                        <router-link to="/music/pop">流行音乐</router-link>
                    </li>
                    <li class="second" v-on:click="subcur='second'">
                        <router-link to="/music/nat">民族音乐</router-link>
                    </li>
                    <li class="third" v-on:click="subcur='third'">
                        <router-link to="/music/cla">古典音乐</router-link>
                    </li>
                </ul>
            </div>
            <router-view></router-view>
        </div>
    </template>
    <template id="movie">
        <div class="sub">
            <div class="submenu">
                <ul :class="subcur">
                    <li class="first" v-on:click="subcur='first'">
                        <router-link to="/movie/love">爱情电影</router-link>
                    </li>
                    <li class="second" v-on:click="subcur='second'">
                        <router-link to="/movie/comedy">喜剧电影</router-link>
                    </li>
                    <li class="third" v-on:click="subcur='third'">
                        <router-link to="/movie/action">动作电影</router-link>
                    </li>
                </ul>
            </div>
            <router-view></router-view>
        </div>
    </template>
    <template id="news">
        <div class="sub">
            <div class="submenu">
                <ul :class="subcur">
                    <li class="first" v-on:click="subcur='first'">
                        <router-link to="/news/ent">娱乐新闻</router-link>
                    </li>
                    <li class="second" v-on:click="subcur='second'">
                        <router-link to="/news/sport">体育新闻</router-link>
                    </li>
                    <li class="third" v-on:click="subcur='third'">
                        <router-link to="/news/social">社会新闻</router-link>
                    </li>
                </ul>
            </div>
            <router-view></router-view>
        </div>
    </template>
    
    <script>
        var Music= {
            data: function(){
                return {
                    subcur: 'first' //选择子栏目的类名
                }
            },
            template :'#music' //组件的模板
        }
        var Movie= {
            data: function(){
                return {
                    subcur: 'first' //选择子栏目的类名
                }
            },
            template: '#movie' //组件的模板
        }
        var News= {
            data: function(){
                return{
                    subcur: 'first'
                }
            },
            template: '#news'
        }
        var Popular = {
            template: '<div>流行音乐内容</div>'
        }
        var National = {
            template: '<div>流行音乐内容2</div>'

        }
        var Classical = {
            template: '<div>流行音乐内容3</div>'
        }
        var Love = {
            template: '<div>流行音乐内容4</div>'
        }
        var Comedy = {
            template: '<div>流行音乐内容5</div>'
        }
        var Action = {
            template: '<div>流行音乐内容6</div>'
        }
        var Ent = {
            template: '<div>流行音乐内容7</div>'
        }
        var Sport = {
            template: '<div>流行音乐内容8</div>'
        }
        var Social = {
            template: '<div>流行音乐内容</div>'
        }
        var routes = [
            {
                path: '/music',
                component: Music, //组件
                children:[
                    { //默认路由
                        path: "",
                        component: Popular
                    },
                    {
                        path: "pop",
                        component: Popular
                    },
                    {
                        path: "nat",
                        component: National
                    },
                    {
                        path: "cla",
                        component: Classical
                    }
                ]
            },
            {
                path: '/movie',
                component: Movie, //组件
                children:[
                    { //默认路由
                        path: "",
                        component: Love
                    },
                    {
                        path: "love",
                        component: Love
                    },
                    {
                        path: "comedy",
                        component: Comedy
                    },
                    {
                        path: "action",
                        component: Action
                    }
                ]
            },
            {
                path: '/news',
                component: News, //组件
                children:[
                    { //默认路由
                        path: "",
                        component: Ent
                    },
                    {
                        path: "ent",
                        component: Ent
                    },
                    {
                        path: "sport",
                        component: Sport
                    },
                    {
                        path: "social",
                        component: Social
                    }
                ]
            },
            { //没有找到路由进行重定向
                path: "*",
                redirect: '/music'
            }
    ]
    var router = new VueRouter({
        routes //注入路由
    })  
        var vm = new Vue({
            el: "#box",
            data: {
                current: 'music'
            },
            router
        })


    </script>
    
</body>
</html>